<template>
  <div style="position: relative">
    <el-card>
      <div style="margin-bottom: 5px">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="fuqin" style="height: 580px">
        <div class="main">
          <div class="context">
            <div style="margin-top: 15px" class="ipt">
              <el-input
                placeholder="请输入内容"
                v-model.number="input"
                class="input-with-select"
                clearable
              >
                <el-button
                  @click="queryData"
                  slot="append"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
              <el-button
                @click="addshow = true"
                type="primary"
                style="margin-left: 14px"
                >添加用户</el-button
              >
              <el-button
                type="success"
                style="margin-left: 14px"
                @click="reload"
                >重置</el-button
              >
            </div>
            <!-- 表格 -->
            <table cellspacing="0">
              <tr>
                <th>#</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>角色</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.email }}</td>
                <td>{{ item.mobile }}</td>
                <td>{{ item.role_name }}</td>
                <td>
                  <el-switch
                    v-model="item.mg_state"
                    active-color="#409eff"
                    inactive-color="#ccc"
                    :active-value="true"
                    :inactive-value="false"
                    @change="changeDone(item.id, item.mg_state)"
                  >
                  </el-switch>
                </td>
                <td>
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    circle
                    @click="changUser(item.id)"
                  ></el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="deleDate(item.id)"
                  ></el-button>
                  <el-button
                    size="mini"
                    type="warning"
                    icon="el-icon-edit"
                    circle
                    @click="powerGo(item.id)"
                  ></el-button>
                </td>
              </tr>
            </table>
            <!-- 底部 -->
            <div class="footer">
              <span>共{{ total }}条</span>
              <el-select v-model="value" placeholder="请选择" size="small">
                <!-- 下拉框 -->
                <el-option
                  v-for="item in Math.ceil(total / 2)"
                  :key="item"
                  :label="item * 2 + '条' + '/页'"
                  :value="item"
                >
                  <span style="float: left">{{ item * 2 + "条" + "/页" }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.value
                  }}</span>
                </el-option>
              </el-select>
              <!-- 分页 -->
              <el-pagination
                small
                background
                layout="prev, pager, next,jumper"
                :total="Math.ceil(this.total / 2) * 10"
                :current-page.sync="num"
              >
                // 共多少页
              </el-pagination>
              <!-- 前往多少页 -->
          
            </div>
          </div>
          <!-- 添加时输入的表单 -->
          <div class="add" v-if="addshow">
            <div style="margin: 20px">添加用户</div>
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="addForm"
            >
              <el-form-item
                size="small"
                label="用户名"
                :rules="[{ required: true, message: '用户名不能为空' }]"
              >
                <el-input v-model="addForm.username"></el-input>
              </el-form-item>
              <el-form-item
                size="small"
                label="密码"
                :rules="[{ required: true, message: '密码不能为空' }]"
              >
                <el-input v-model="addForm.password"></el-input>
              </el-form-item>
              <el-form-item
                size="small"
                label="邮箱"
                :rules="[{ required: true, message: '邮箱不能为空' }]"
              >
                <el-input v-model="addForm.email"></el-input>
              </el-form-item>
              <el-form-item
                size="small"
                label="手机"
                :rules="[{ required: true, message: '手机不能为空' }]"
              >
                <el-input v-model="addForm.mobile"></el-input>
              </el-form-item>
              <div class="btnOne">
                <el-button @click="addshow = false">取消</el-button>
                <el-button type="primary" @click="addData">确定</el-button>
              </div>
            </el-form>
          </div>
          <!-- 修改时输入的表单 -->
          <div class="add" v-if="changeshow">
            <div style="margin: 20px">修改用户</div>
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="changeTab"
            >
              <el-form-item
                size="small"
                label="用户名"
                :rules="[{ required: true, message: '用户名不能为空' }]"
              >
                <el-input v-model="changeTab.username" disabled></el-input>
              </el-form-item>
              <el-form-item
                size="small"
                label="邮箱"
                :rules="[{ required: true, message: '邮箱不能为空' }]"
              >
                <el-input v-model="changeTab.email"></el-input>
              </el-form-item>
              <el-form-item
                size="small"
                label="手机"
                :rules="[{ required: true, message: '手机不能为空' }]"
              >
                <el-input v-model="changeTab.mobile"></el-input>
              </el-form-item>
              <div class="btnOne">
                <el-button @click="changeshow = false">取消</el-button>
                <el-button type="primary" @click="cahngeUserData"
                  >确定</el-button
                >
              </div>
            </el-form>
          </div>
          <!-- 删除框 -->
          <div class="delete" v-if="deleteShow">
            <div style="margin: 20px">您确认要删除这条数据吗？</div>
            <div class="deleteBtn">
              <el-button @click="deleteShow = false">取消</el-button>
              <el-button type="primary" @click="deleteConfirm">确定</el-button>
            </div>
          </div>
          <!-- 角色分配框 -->
          <div class="powerBig" v-if="powerShow">
            <div style="margin: 20px">修改用户</div>
            <div class="power">
              <p style="color: red">
                当前用户：<span>{{ powerIpt.username }}</span>
              </p>
              <p style="color: red">
                当前角色：<span>{{ powerIpt.power }}</span>
              </p>
              <p>
                分配新角色：
                <!-- 权限选择下拉框 -->
                <el-select v-model="selectValue" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </p>
              <div class="powerBtn">
                <el-button @click="powerShow = false">取消</el-button>
                <el-button type="primary" @click="changePowe">确定</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserDataAPI } from "@/api";
import axios from "@/utils/request";

export default {
  data() {
    return {
      num: 1,
      list: [],
      input: "",
      deleteShow: false,
      addshow: false,
      changeshow: false,
      total: "",
      powerShow: false,
      value: "2条/页",
      labelPosition: "right",
      addForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      changeTab: {
        username: "",
        email: "",
        mobile: "",
      },
      powerIpt: {
        username: "",
        power: "",
      },
      options: [],
      selectValue: "",
    };
  },
  async created() {
    this.comment();
    const res = await axios({
      method: "get",
      url: "roles",
    });

    this.options = res.data.data;
  },
  methods: {
    open2() {
      this.$message({
        message: "操作成功消息",
        type: "success",
      });
    },
    // 公共请求
    async comment() {
      const res = await getUserDataAPI({
        pagenum: 1,
        pagesize: 2,
      });
      this.total = res.data.data.total;
      console.log(res);
      this.list = res.data.data.users;
    },

    // 搜索
    async queryData() {
      if (this.input === "") return alert("查询内容不能为空");
      console.log(this.input);
      const res = await axios({
        url: `users/${this.input}`,
        method: "get",
      });

      this.list = [res.data.data];
      this.open2();
      this.input = "";
    },
    // 添加用户
    async addData() {
      const res = await axios({
        method: "POST",
        url: `/users`,
        data: {
          password: String(this.addForm.password),
          email: String(this.addForm.email),
          mobile: String(this.addForm.mobile),
          username: String(this.addForm.username),
        },
      });
      this.comment();
      console.log(res);
      this.open2();
      for (let k in this.addForm) {
        this.addForm[k] = "";
      }
      this.addshow = false;
    },
    // 修改状态
    async changeDone(id, state) {
      const res = await axios({
        url: `users/${Number(id)}/state/${state}`,
        method: "put",
      });
      this.open2();
    },
    // 重置按钮
    async reload() {
      this.comment();
      this.open2();
    },
    // 修改用户（出现弹框）
    changUser(id) {
      this.changeshow = true;
      this.changeTab.username = this.list.filter(
        (item) => item.id == id
      )[0].username;
      this.id = id;
    },

    async cahngeUserData() {
      const res = await axios({
        method: "put",
        url: `users/${this.id}`,
        data: {
          email: this.changeTab.email,
          mobile: this.changeTab.mobile,
        },
      });
      this.changeshow = false;
      this.changeTab.email = "";
      this.changeTab.mobile = "";
      this.comment();
      this.open2();
    },
    // 删除数据
    deleDate(id) {
      this.deleteShow = true;
      this.deleteId = id;
    },
    async deleteConfirm() {
      await axios({
        method: "delete",
        url: `users/${this.deleteId}`,
      });
      this.deleteShow = false;
      this.comment();
      this.open2();
    },

    // 修改权限
    powerGo(id) {
      this.powerShow = true;
      this.powerId = id;
      const arr = this.list.filter((item) => item.id === id);
      this.powerIpt.username = arr[0].username;
      this.powerIpt.power = arr[0].role_name;
      this.selectValue = arr[0].role_name;
    },
    async changePowe() {
      const res = await axios({
        method: "put",
        url: `users/${this.powerId}/role`,
        data: {
          rid: this.selectValue,
        },
      });
      this.open2();
      this.comment();
      this.powerShow = false;
    },
    writeNum(e) {
      const max = Math.ceil(this.total / 2);
      console.log(max);
      if (e.target.value > max) {
        e.target.value = max;
      }
      if (!this.num) {
        alert("输入内容不能为空");
        this.num = 1;
      }
      this.num = Number(e.target.value);
    },
  },
  // 写入页码
  watch: {
    async value(val) {
      let num = Math.ceil(val) * 2;
      const res = await getUserDataAPI({
        pagenum: 1,
        pagesize: num,
      });
      this.list = res.data.data.users;
    },
    async num(val) {
      this.value = "2条/页";
      const res = await getUserDataAPI({
        pagenum: val,
        pagesize: 2,
      });

      this.list = res.data.data.users;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
<style scoped>
.btnOne {
  margin-left: 30%;
}
.power {
  margin-left: 5%;
  color: rgb(7, 5, 5);
}
.add {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 50%;
  transform: translate(-55%, -50%);
  background-color: #eee;
}
.powerBig {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 50%;
  transform: translate(-55%, -50%);
  background-color: #eee;
}
.powerBtn {
  margin-left: 28%;
  margin-top: 16%;
}
.delete {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  transform: translate(-55%, -50%);
  background-color: #eee;
}
.deleteBtn {
  margin-left: 30%;
  margin-top: 20%;
}
table {
  width: 95%;
  height: 20%;
  margin-left: 2%;
  border: 1px solid gray;
}
th,
td {
  /* padding: 2%; */
  border: 1px solid gray;
  text-align: center;
  width: 4%;
}
.footer {
  margin-left: 2%;
  margin-top: 2%;
}
.el-pagination {
  display: inline-block;
}
.main {
  background-color: #ebeef5;
  width: 100%;
  height: 100%;
}
.ico {
  color: #c9cad1;
}
.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
  width: 70px;
}
.strong {
  font-weight: 800;
}
.header {
  margin: 2% 0 0 3%;
}
.gray {
  color: black;
}
.context {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
}
.el-input-group {
  width: 40%;
}
.ipt {
  padding: 20px;
  margin: 0 !important;
}

.el-table--border {
  border-right: none;
  border-bottom: none;
  margin-left: 2%;
  width: 96% !important;
}
.endIpt {
  width: 3%;
  text-align: center;
}
.endSpan {
  margin-left: 1%;
}
</style>